<template>
  <div class="preview-box" v-if="visible">
    <van-image-preview v-if="type === 0" v-model="showImage" :images="[url]" @close="closeDialog"></van-image-preview>

    <van-overlay :show="showVideo" v-if="type === 2">
      <div class="box">
        <video class="preview-item video" :src="url" controls></video>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: 'Preview',
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '预览',
    },
    type: {
      type: [Number, String],
      default: 0, // 0:图片 2:视频
    },
    // 预览文件地址
    urlList: {
      type: [String, Array],
      default: '',
    },
  },
  data() {
    return {
      list: [], // 列表
      showImage: false,
      showVideo: false,
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('update:value', v)
      },
    },
    url() {
      return Array.isArray(this.urlList) ? this.urlList[0] : this.urlList || ''
    },
  },
  watch: {
    visible(v) {
      if (v && this.type === 0) {
        this.$nextTick(() => {
          this.showImage = true
          // const that = this
          // const instance = ImagePreview({
          //   images: [this.url],
          //   closeable: true,
          //   onClose() {
          //     that.showImage = false
          //     instance.close()
          //   },
          // })
        })
      }
      if (v && this.type === 2) {
        this.$nextTick(() => {
          this.showVideo = true
        })
      }
    },
  },
  created() {},
  methods: {
    closeDialog() {
      this.showImage = false
      this.showVideo = false
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
.preview-box {
  width: 100%;
  .preview-item {
    width: 100%;
    text-align: center;
    &.img,
    &.video {
      min-height: 300px;
    }
  }
}
</style>
